<template>
    <div class="gulu-bread">
        <div class="breadItem" v-for="item in validBread">
            <Component :is="item" />>&nbsp;
        </div>
    </div>
</template>

<script lang="ts" setup>
import { computed, useSlots } from 'vue';
import BreadItem from './BreadItem.vue';
const slots = useSlots();
const defaultSlotContent = slots?.default?.();
const validBread = computed(() => {
    if (!defaultSlotContent) return [];
    return defaultSlotContent.filter((vnode) => {
        if (vnode.type !== BreadItem) {
            console.error('Bread的子标签必须是BreadItem');
            return false;
        }
        return true;
    });
});
if (!validBread.value.length && defaultSlotContent) {
    throw new Error('Bread组件中必须包含至少一个有效的 Tab 子组件');
}

</script>
<style lang="scss" scoped>
.gulu-bread, .gulu-breadItem {
    width: 100%;
    height: 100%;
    display: flex;
}
.gulu-bread {
    overflow: auto;
    justify-content: left;
}
.gulu-breadItem {
    width: auto;
}
</style>